സിഎസ്എസ് സബ്ഗ്രിഡ് ലേഔട്ട്: കൺസ്ട്രെയിൻ്റ് പ്രൊപ്പഗേഷനും നെസ്റ്റഡ് ഗ്രിഡ് ഡിപെൻഡൻസിയും മനസ്സിലാക്കാം

സിഎസ്എസ് ഗ്രിഡ് ലേഔട്ടിന്റെ ശക്തമായ ഒരു വിപുലീകരണമാണ് സിഎസ്എസ് സബ്ഗ്രിഡ്. ഇത് ഒരു ഗ്രിഡ് ഐറ്റത്തിന് അതിന്റെ പാരന്റ് ഗ്രിഡിന്റെ ട്രാക്ക് സൈസിംഗിൽ പങ്കുചേരാൻ അവസരം നൽകുന്നു. ഈ കഴിവിനെ കൺസ്ട്രെയിൻ്റ് പ്രൊപ്പഗേഷൻ എന്ന് പറയുന്നു. ഇത് പാരന്റ്, ചൈൽഡ് ഗ്രിഡുകൾക്കിടയിൽ ട്രാക്ക് ഡെഫനിഷനുകൾ പങ്കിട്ടുകൊണ്ട് സങ്കീർണ്ണവും റെസ്‌പോൺസീവുമായ ലേഔട്ടുകൾ നിർമ്മിക്കാൻ സഹായിക്കുന്നു. നെസ്റ്റഡ് ഗ്രിഡ് ഘടനകളിൽ സബ്ഗ്രിഡ് എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്ന് മനസ്സിലാക്കുന്നത് അഡ്വാൻസ്ഡ് സിഎസ്എസ് ലേഔട്ട് ടെക്നിക്കുകൾ പഠിക്കുന്നതിന് അത്യാവശ്യമാണ്.

എന്താണ് സിഎസ്എസ് സബ്ഗ്രിഡ്?

കൺസ്ട്രെയിൻ്റ് പ്രൊപ്പഗേഷനിലേക്ക് കടക്കുന്നതിന് മുൻപ്, സിഎസ്എസ് സബ്ഗ്രിഡ് എന്താണെന്ന് ചുരുക്കി പറയാം. സബ്ഗ്രിഡ് എന്നത് ഒരു പാരന്റ് ഗ്രിഡിനുള്ളിലെ ഒരു ഗ്രിഡ് ഐറ്റത്തിൽ ഡിക്ലയർ ചെയ്യുന്ന ഒരു ഗ്രിഡ് ആണ്. ഒരു സാധാരണ നെസ്റ്റഡ് ഗ്രിഡും സബ്ഗ്രിഡും തമ്മിലുള്ള പ്രധാന വ്യത്യാസം, പാരന്റ് ഗ്രിഡിന്റെ ട്രാക്ക് സൈസിംഗ് (വരികളും നിരകളും) ഉപയോഗിക്കാനുള്ള സബ്ഗ്രിഡിന്റെ കഴിവാണ്. ഇതിനർത്ഥം സബ്ഗ്രിഡിന്റെ ട്രാക്കുകൾ പാരന്റിന്റെ ട്രാക്കുകളുമായി യോജിച്ച് പ്രവർത്തിക്കുന്നു, ഇത് ഒരു യോജിപ്പുള്ളതും പ്രവചിക്കാവുന്നതുമായ ലേഔട്ട് ഉണ്ടാക്കുന്നു.

ഒരു വലിയ ഗ്രിഡിലുള്ള മറ്റ് കാർഡുകളുമായി സ്ഥിരമായ അലൈൻമെൻ്റ് നിലനിർത്തേണ്ട ഒരു കാർഡ് കമ്പോണന്റ് നിങ്ങൾക്കുണ്ടെന്ന് കരുതുക. കാർഡിന്റെ ഉള്ളടക്കം എന്തുതന്നെയായാലും, കാർഡിനുള്ളിലെ ഘടകങ്ങളെ പുറത്തുള്ള ഗ്രിഡിന്റെ നിരകളുമായും വരികളുമായും കൃത്യമായി അലൈൻ ചെയ്യാൻ സബ്ഗ്രിഡ് സഹായിക്കുന്നു.

കൺസ്ട്രെയിൻ്റ് പ്രൊപ്പഗേഷൻ: സബ്ഗ്രിഡുകൾ ട്രാക്ക് സൈസിംഗ് എങ്ങനെയാണ് ഇൻഹെറിറ്റ് ചെയ്യുന്നത്

കൺസ്ട്രെയിൻ്റ് പ്രൊപ്പഗേഷൻ എന്നത് ഒരു സബ്ഗ്രിഡ് അതിന്റെ പാരന്റ് ഗ്രിഡിന്റെ ട്രാക്ക് സൈസിംഗ് ഇൻഹെറിറ്റ് ചെയ്യുന്ന ഒരു രീതിയാണ്. നിങ്ങൾ grid-template-rows: subgrid; അല്ലെങ്കിൽ grid-template-columns: subgrid; (അല്ലെങ്കിൽ രണ്ടും) ഡിക്ലയർ ചെയ്യുമ്പോൾ, പാരന്റ് ഗ്രിഡിൽ നിന്നുള്ള അനുബന്ധ ട്രാക്കുകൾ ഉപയോഗിക്കാൻ നിങ്ങൾ സബ്ഗ്രിഡിനോട് നിർദ്ദേശിക്കുകയാണ്. തുടർന്ന് സബ്ഗ്രിഡ് പാരന്റിന്റെ ഗ്രിഡ് ട്രാക്ക് സൈസിംഗ് അൽഗോരിതത്തിൽ പങ്കുചേരുന്നു.

കൺസ്ട്രെയിൻ്റ് പ്രൊപ്പഗേഷൻ എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്നതിനെക്കുറിച്ചുള്ള ഒരു വിവരണം താഴെ നൽകുന്നു:

1. ഡിക്ലറേഷൻ: നിങ്ങൾ ഒരു പാരന്റ് ഗ്രിഡിനെ പ്രത്യേക വരി, നിര ട്രാക്ക് സൈസുകൾ ഉപയോഗിച്ച് നിർവചിക്കുന്നു (ഉദാഹരണത്തിന്, fr യൂണിറ്റുകൾ, ഫിക്സഡ് പിക്സൽ മൂല്യങ്ങൾ, അല്ലെങ്കിൽ auto).
2. ഗ്രിഡ് ഐറ്റം സബ്ഗ്രിഡ് ആകുന്നു: നിങ്ങൾ പാരന്റ് ഗ്രിഡിനുള്ളിലെ ഒരു ഗ്രിഡ് ഐറ്റം തിരഞ്ഞെടുത്ത് അതിനെ grid-template-rows: subgrid; കൂടാതെ/അല്ലെങ്കിൽ grid-template-columns: subgrid; ഉപയോഗിച്ച് ഒരു സബ്ഗ്രിഡായി ഡിക്ലയർ ചെയ്യുന്നു.
3. ഇൻഹെറിറ്റൻസ്: subgrid വ്യക്തമാക്കിയ ആക്സിസിൽ (വരികൾ അല്ലെങ്കിൽ നിരകൾ) സബ്ഗ്രിഡ് പാരന്റ് ഗ്രിഡിന്റെ ട്രാക്ക് ഡെഫനിഷനുകൾ ഇൻഹെറിറ്റ് ചെയ്യുന്നു.
4. അലൈൻമെൻ്റ്: സബ്ഗ്രിഡിന്റെ ഗ്രിഡ് ലൈനുകൾ പാരന്റ് ഗ്രിഡിന്റെ അനുബന്ധ ഗ്രിഡ് ലൈനുകളുമായി അലൈൻ ചെയ്യുന്നു.
5. റെസ്‌പോൺസീവ് സ്വഭാവം: പാരന്റ് ഗ്രിഡ് വലുപ്പം മാറ്റുമ്പോൾ, സബ്ഗ്രിഡ് അതിന്റെ ട്രാക്ക് സൈസുകൾ സ്വയമേവ ക്രമീകരിച്ച് അലൈൻമെൻ്റ് നിലനിർത്തുന്നു, ഇത് ഒരു റെസ്‌പോൺസീവ് ലേഔട്ട് ഉറപ്പാക്കുന്നു.

ഉദാഹരണം:

താഴെ പറയുന്ന HTML ഘടന പരിഗണിക്കുക:

            <div class="container">
  <div class="item">
    <div class="subgrid">
      <div>Item A</div>
      <div>Item B</div>
      <div>Item C</div>
    </div>
  </div>
  <div class="item">...</div>
  <div class="item">...</div>
</div>
            

              
                Copy
              
            
          

അതുപോലെ താഴെ പറയുന്ന CSS:

            .container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto auto;
  gap: 10px;
}

.item {
  background-color: #eee;
  padding: 10px;
}

.subgrid {
  display: grid;
  grid-column: 1 / -1; /* Span all columns of the parent */
  grid-template-columns: subgrid;
  grid-template-rows: auto;
  gap: 5px;
}

.subgrid > div {
  background-color: #ddd;
  padding: 5px;
}
            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, .subgrid എലമെന്റ് .container-ൽ നിന്ന് കോളം ട്രാക്ക് സൈസിംഗ് ഇൻഹെറിറ്റ് ചെയ്യുന്നു. സബ്ഗ്രിഡിനുള്ളിലെ ഐറ്റംസ് (Item A, Item B, Item C) പാരന്റ് ഗ്രിഡിന്റെ കോളങ്ങളുമായി സ്വയമേവ അലൈൻ ചെയ്യുന്നു. പാരന്റ് ഗ്രിഡിന്റെ കോളം സൈസുകൾ മാറുകയാണെങ്കിൽ, സബ്ഗ്രിഡും അതിനനുസരിച്ച് ക്രമീകരിക്കുന്നു.

നെസ്റ്റഡ് ഗ്രിഡ് ഡിപെൻഡൻസി: സബ്ഗ്രിഡുകൾക്കുള്ളിലെ സബ്ഗ്രിഡുകളുടെ വെല്ലുവിളികൾ

സബ്ഗ്രിഡുകൾ ശക്തമാണെങ്കിലും, അവയെ ആഴത്തിൽ നെസ്റ്റ് ചെയ്യുന്നത് സങ്കീർണ്ണതയും ഡിപെൻഡൻസി പ്രശ്നങ്ങളും ഉണ്ടാക്കും. ഒരു സബ്ഗ്രിഡ് മറ്റൊരു സബ്ഗ്രിഡിന്റെ ട്രാക്ക് സൈസിംഗിനെ ആശ്രയിക്കുകയും, ആ സബ്ഗ്രിഡ് പാരന്റ് ഗ്രിഡിന്റെ ട്രാക്ക് സൈസിംഗിനെ ആശ്രയിക്കുകയും ചെയ്യുമ്പോഴാണ് നെസ്റ്റഡ് ഗ്രിഡ് ഡിപെൻഡൻസി ഉണ്ടാകുന്നത്. ഇത് കൈകാര്യം ചെയ്യാൻ പ്രയാസമുള്ള ഒരു ഡിപെൻഡൻസി ശൃംഖല സൃഷ്ടിക്കുന്നു.

നെസ്റ്റഡ് സബ്ഗ്രിഡുകളുടെ പ്രധാന വെല്ലുവിളി, പാരന്റ് ഗ്രിഡിന്റെ ട്രാക്ക് സൈസിംഗിലെ മാറ്റങ്ങൾ എല്ലാ ഡിസെൻഡന്റ് സബ്ഗ്രിഡുകളിലും കാസ്കേഡിംഗ് ഇഫക്റ്റുകൾ ഉണ്ടാക്കും എന്നതാണ്. ശ്രദ്ധാപൂർവ്വം ആസൂത്രണം ചെയ്തില്ലെങ്കിൽ, ഇത് അപ്രതീക്ഷിതമായ ലേഔട്ട് മാറ്റങ്ങളിലേക്ക് നയിക്കുകയും ഡീബഗ്ഗിംഗ് കൂടുതൽ ബുദ്ധിമുട്ടാക്കുകയും ചെയ്യും.

നെസ്റ്റഡ് സബ്ഗ്രിഡ് ഡിപെൻഡൻസിയുടെ ഉദാഹരണം:

            <div class="container">
  <div class="item">
    <div class="subgrid-level-1">
      <div class="subgrid-level-2">
        <div>Item 1</div>
        <div>Item 2</div>
      </div>
    </div>
  </div>
</div>
            

              
                Copy
              
            
          

            .container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
}

.item {
  display: grid;
  grid-template-rows: auto;
}

.subgrid-level-1 {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: 1fr;
}

.subgrid-level-2 {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: 1fr;
}
            

              
                Copy
              
            
          

ഈ സാഹചര്യത്തിൽ, .subgrid-level-2 എന്നത് .subgrid-level-1 ന്റെ കോളം ട്രാക്ക് സൈസിംഗിനെ ആശ്രയിച്ചിരിക്കുന്നു, അത് .container-ന്റെ കോളം ട്രാക്ക് സൈസിംഗിനെയും ആശ്രയിച്ചിരിക്കുന്നു. നിങ്ങൾ .container-ന്റെ grid-template-columns മാറ്റുകയാണെങ്കിൽ, രണ്ട് സബ്ഗ്രിഡുകളെയും അത് ബാധിക്കും.

നെസ്റ്റഡ് ഗ്രിഡ് ഡിപെൻഡൻസി പ്രശ്നങ്ങൾ ലഘൂകരിക്കൽ

നെസ്റ്റഡ് ഗ്രിഡ് ഡിപെൻഡൻസികളുമായി ബന്ധപ്പെട്ട വെല്ലുവിളികൾ ലഘൂകരിക്കുന്നതിനുള്ള ചില വഴികൾ താഴെ നൽകുന്നു:

• നെസ്റ്റിംഗ് ഡെപ്ത് പരിമിതപ്പെടുത്തുക: സാധിക്കുമ്പോഴെല്ലാം ആഴത്തിലുള്ള നെസ്റ്റഡ് സബ്ഗ്രിഡുകൾ ഒഴിവാക്കുക. ഗ്രിഡിനുള്ളിലെ ലളിതമായ കമ്പോണന്റുകൾക്കായി സാധാരണ നെസ്റ്റഡ് ഗ്രിഡുകളോ ഫ്ലെക്സ്ബോക്സോ പോലുള്ള ബദൽ ലേഔട്ട് സമീപനങ്ങൾ പരിഗണിക്കുക. ആഴത്തിലുള്ള നെസ്റ്റിംഗ് സങ്കീർണ്ണത വർദ്ധിപ്പിക്കുകയും ലേഔട്ടിനെക്കുറിച്ച് ചിന്തിക്കുന്നത് കൂടുതൽ പ്രയാസകരമാക്കുകയും ചെയ്യുന്നു.
• ആവശ്യമുള്ളിടത്ത് കൃത്യമായ ട്രാക്ക് സൈസിംഗ് ഉപയോഗിക്കുക: ചില സാഹചര്യങ്ങളിൽ, സബ്ഗ്രിഡിനുള്ളിൽ ട്രാക്ക് സൈസുകൾ വ്യക്തമായി നിർവചിക്കുന്നത് പാരന്റ് ഗ്രിഡിന്റെ ട്രാക്ക് സൈസിംഗിൽ നിന്ന് അതിനെ വേർപെടുത്താൻ സഹായിക്കും. പാരന്റ് ഗ്രിഡുമായി കർശനമായ അലൈൻമെൻ്റ് ആവശ്യമില്ലാത്ത കമ്പോണന്റുകൾക്ക് ഇത് ഉപയോഗപ്രദമാകും. എന്നിരുന്നാലും, പാരന്റ് ട്രാക്ക് സൈസിംഗിൽ നിന്ന് വ്യതിചലിക്കുകയാണെങ്കിൽ ഒരു സ്ഥിരതയുള്ള ഡിസൈൻ സിസ്റ്റം നിലനിർത്താൻ ശ്രദ്ധിക്കുക.
• സിഎസ്എസ് വേരിയബിളുകൾ (കസ്റ്റം പ്രോപ്പർട്ടീസ്) പ്രയോജനപ്പെടുത്തുക: ഉയർന്ന തലത്തിൽ (ഉദാഹരണത്തിന്, :root സെലക്ടറിൽ) ട്രാക്ക് സൈസുകൾ നിർവചിക്കാൻ സിഎസ്എസ് വേരിയബിളുകൾ ഉപയോഗിക്കുക, തുടർന്ന് പാരന്റ്, സബ്ഗ്രിഡുകളിൽ ആ വേരിയബിളുകൾ റെഫർ ചെയ്യുക. ഇത് ഒരൊറ്റ സ്ഥലത്ത് നിന്ന് ട്രാക്ക് സൈസിംഗ് നിയന്ത്രിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു, സ്ഥിരത നിലനിർത്തുന്നത് എളുപ്പമാക്കുന്നു.
• സമഗ്രമായ ടെസ്റ്റിംഗ്: നെസ്റ്റഡ് ഗ്രിഡ് ഡിപെൻഡൻസികൾ മൂലമുണ്ടാകുന്ന അപ്രതീക്ഷിത ലേഔട്ട് പ്രശ്നങ്ങൾ കണ്ടെത്താനും പരിഹരിക്കാനും നിങ്ങളുടെ ലേഔട്ടുകൾ വിവിധ സ്ക്രീൻ വലുപ്പങ്ങളിലും ബ്രൗസറുകളിലും വിപുലമായി ടെസ്റ്റ് ചെയ്യുക. എഡ്ജ് കേസുകൾക്കും ഉള്ളടക്ക വ്യതിയാനങ്ങൾക്കും പ്രത്യേക ശ്രദ്ധ നൽകുക.
• സിഎസ്എസ് ഗ്രിഡ് ഇൻസ്പെക്ടർ ടൂളുകൾ: ഗ്രിഡ് ഘടന കാണാനും അലൈൻമെൻ്റ് അല്ലെങ്കിൽ സൈസിംഗ് പ്രശ്നങ്ങൾ കണ്ടെത്താനും ബ്രൗസർ ഡെവലപ്പർ ടൂളുകൾ (സിഎസ്എസ് ഗ്രിഡ് ഇൻസ്പെക്ടർ പോലുള്ളവ) ഉപയോഗിക്കുക. സബ്ഗ്രിഡുകൾ അവയുടെ പാരന്റ് ഗ്രിഡുകളുമായി എങ്ങനെ ഇടപഴകുന്നു എന്ന് മനസ്സിലാക്കാൻ ഈ ടൂളുകൾ നിങ്ങളെ സഹായിക്കും.
• കണ്ടെയ്നർ ക്വറികൾ പരിഗണിക്കുക (ലഭ്യമാകുമ്പോൾ): കണ്ടെയ്നർ ക്വറികൾക്ക് കൂടുതൽ പിന്തുണ ലഭിക്കുമ്പോൾ, ചില സാഹചര്യങ്ങളിൽ അവ സബ്ഗ്രിഡുകൾക്ക് ഒരു ബദൽ വാഗ്ദാനം ചെയ്യും. വ്യൂപോർട്ടിന് പകരം, അവയുടെ കണ്ടെയ്നിംഗ് എലമെന്റിന്റെ വലുപ്പത്തെ അടിസ്ഥാനമാക്കി എലമെന്റുകളെ സ്റ്റൈൽ ചെയ്യാൻ കണ്ടെയ്നർ ക്വറികൾ നിങ്ങളെ അനുവദിക്കുന്നു, ഇത് സങ്കീർണ്ണമായ നെസ്റ്റഡ് ഗ്രിഡ് ഘടനകളുടെ ആവശ്യം കുറയ്ക്കാൻ സഹായിക്കും.
• സങ്കീർണ്ണമായ ലേഔട്ടുകൾ വിഭജിക്കുക: സങ്കീർണ്ണമായ നെസ്റ്റഡ് ഗ്രിഡ് ഡിപെൻഡൻസികളുമായി നിങ്ങൾ ബുദ്ധിമുട്ടുകയാണെങ്കിൽ, ലേഔട്ടിനെ ചെറുതും കൈകാര്യം ചെയ്യാൻ എളുപ്പമുള്ളതുമായ കമ്പോണന്റുകളായി വിഭജിക്കുന്നത് പരിഗണിക്കുക. ഇത് പരിപാലനം മെച്ചപ്പെടുത്താനും അപ്രതീക്ഷിത ലേഔട്ട് പ്രശ്നങ്ങളുടെ സാധ്യത കുറയ്ക്കാനും സഹായിക്കും.

പ്രായോഗിക ഉദാഹരണങ്ങളും ഉപയോഗങ്ങളും

ഒരു പേജിന്റെ വിവിധ ഭാഗങ്ങളിലോ സങ്കീർണ്ണമായ കമ്പോണന്റുകളിലോ ഘടകങ്ങളെ അലൈൻ ചെയ്യേണ്ട സാഹചര്യങ്ങളിൽ സബ്ഗ്രിഡ് വളരെ ഉപയോഗപ്രദമാണ്. ചില പ്രായോഗിക ഉദാഹരണങ്ങൾ താഴെ നൽകുന്നു:

• ഫോം ലേഔട്ടുകൾ: ഫോം ലേബലുകളും ഇൻപുട്ട് ഫീൽഡുകളും ഒന്നിലധികം വരികളിലും നിരകളിലും സ്ഥിരമായി അലൈൻ ചെയ്യുന്നു. ലേബലുകളുടെ നീളം എന്തുതന്നെയായാലും ലേബലുകളും ഇൻപുട്ട് ഫീൽഡുകളും കൃത്യമായി അലൈൻ ചെയ്തിട്ടുണ്ടെന്ന് സബ്ഗ്രിഡ് ഉറപ്പാക്കുന്നു.
• കാർഡ് കമ്പോണന്റുകൾ: ഉള്ളടക്കം വ്യത്യാസപ്പെട്ടിരിക്കുമ്പോഴും ഹെഡിംഗുകൾ, ചിത്രങ്ങൾ, ഉള്ളടക്കം എന്നിവ സ്ഥിരമായി അലൈൻ ചെയ്തുകൊണ്ട് കാർഡ് കമ്പോണന്റുകൾ നിർമ്മിക്കുന്നു. കാർഡിനുള്ളിലെ ഘടകങ്ങളെ പേജിന്റെ മൊത്തത്തിലുള്ള ഗ്രിഡ് ഘടനയുമായി അലൈൻ ചെയ്യാൻ സബ്ഗ്രിഡ് നിങ്ങളെ അനുവദിക്കുന്നു.
• പ്രൈസിംഗ് ടേബിളുകൾ: ഒരു പ്രൈസിംഗ് ടേബിളിലെ കോളം ഹെഡറുകളും ഡാറ്റ സെല്ലുകളും അലൈൻ ചെയ്ത് വൃത്തിയും പ്രൊഫഷണൽ രൂപവും ഉറപ്പാക്കുന്നു. സെല്ലുകളിലെ ടെക്സ്റ്റിന്റെ അളവ് വ്യത്യാസപ്പെട്ടിരുന്നാലും സബ്ഗ്രിഡിന് കൃത്യമായ അലൈൻമെൻ്റ് നിലനിർത്താൻ കഴിയും.
• ഇമേജ് ഗാലറികൾ: വ്യത്യസ്ത വലുപ്പത്തിലുള്ള ചിത്രങ്ങൾ ഒരു ഗ്രിഡ് ലേഔട്ടിൽ കൃത്യമായി അലൈൻ ചെയ്യുന്ന ഇമേജ് ഗാലറികൾ നിർമ്മിക്കുന്നു. ചിത്രത്തിന്റെ അളവുകൾ എന്തുതന്നെയായാലും സ്ഥിരമായ ആസ്പെക്റ്റ് റേഷ്യോയും അലൈൻമെന്റും നിലനിർത്താൻ സബ്ഗ്രിഡ് സഹായിക്കും.
• കലണ്ടർ വ്യൂസ്: ഒരു കലണ്ടർ കാഴ്ചയിൽ ആഴ്ചയിലെ ദിവസങ്ങളും തീയതികളും അലൈൻ ചെയ്ത് കാഴ്ചയ്ക്ക് ആകർഷകവും ഉപയോഗിക്കാൻ എളുപ്പമുള്ളതുമായ ഒരു ഇന്റർഫേസ് ഉറപ്പാക്കുന്നു.

ഉദാഹരണം: സബ്ഗ്രിഡ് ഉപയോഗിച്ചുള്ള ഫോം ലേഔട്ട്

കൃത്യമായി അലൈൻ ചെയ്ത ലേബലുകളും ഇൻപുട്ട് ഫീൽഡുകളും ഉള്ള ഒരു ഫോം ലേഔട്ട് നിർമ്മിക്കാൻ സബ്ഗ്രിഡ് എങ്ങനെ ഉപയോഗിക്കാമെന്നതിന്റെ ഒരു ഉദാഹരണം ഇതാ:

            <form class="form-grid">
  <div class="form-row">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
  </div>
  <div class="form-row">
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
  </div>
  <div class="form-row">
    <label for="message">Message:</label>
    <textarea id="message" name="message"></textarea>
  </div>
</form>
            

              
                Copy
              
            
          

            .form-grid {
  display: grid;
  grid-template-columns: 1fr 2fr; /* Define two columns: label and input */
  gap: 10px;
}

.form-row {
  display: grid;
  grid-template-columns: subgrid; /* Inherit column track sizing from the parent */
  gap: 5px;
}

label {
  text-align: right;
}
            

              
                Copy
              
            
          

ഈ ഉദാഹരണത്തിൽ, .form-row എലമെന്റുകൾ .form-grid എലമെന്റിൽ നിന്ന് കോളം ട്രാക്ക് സൈസിംഗ് ഇൻഹെറിറ്റ് ചെയ്യുന്നു. ഇത് ഫോമിന്റെ എല്ലാ വരികളിലുമുള്ള ലേബലുകളും ഇൻപുട്ട് ഫീൽഡുകളും കൃത്യമായി അലൈൻ ചെയ്തിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുന്നു.

ബ്രൗസർ സപ്പോർട്ട്

ക്രോം, ഫയർഫോക്സ്, സഫാരി, എഡ്ജ് എന്നിവയുൾപ്പെടെയുള്ള ആധുനിക ബ്രൗസറുകളിൽ സിഎസ്എസ് സബ്ഗ്രിഡിനുള്ള പിന്തുണ പൊതുവെ നല്ലതാണ്. എന്നിരുന്നാലും, നിങ്ങളുടെ ഉപയോക്താക്കൾക്ക് മതിയായ ബ്രൗസർ പിന്തുണയുണ്ടെന്ന് ഉറപ്പാക്കാൻ Can I Use (https://caniuse.com/css-subgrid)-ൽ അനുയോജ്യത പരിശോധിക്കേണ്ടത് അത്യാവശ്യമാണ്. പഴയ ബ്രൗസറുകളെ പിന്തുണയ്ക്കണമെങ്കിൽ, പോളിഫില്ലുകളോ മറ്റ് ലേഔട്ട് ടെക്നിക്കുകളോ ഉപയോഗിക്കുന്നത് പരിഗണിക്കാവുന്നതാണ്.

ഉപസംഹാരം

പാരന്റ്, ചൈൽഡ് ഗ്രിഡുകൾക്കിടയിൽ ട്രാക്ക് ഡെഫനിഷനുകൾ പങ്കിട്ടുകൊണ്ട് സങ്കീർണ്ണവും റെസ്‌പോൺസീവുമായ ലേഔട്ടുകൾ നിർമ്മിക്കുന്നതിനുള്ള ശക്തമായ ഒരു ഉപകരണമാണ് സിഎസ്എസ് സബ്ഗ്രിഡ്. ഈ അഡ്വാൻസ്ഡ് സിഎസ്എസ് ലേഔട്ട് ടെക്നിക് നന്നായി മനസ്സിലാക്കാൻ കൺസ്ട്രെയിൻ്റ് പ്രൊപ്പഗേഷനും നെസ്റ്റഡ് ഗ്രിഡ് ഡിപെൻഡൻസികളുടെ വെല്ലുവിളികളും മനസ്സിലാക്കേണ്ടത് അത്യാവശ്യമാണ്. ഈ ഗൈഡിൽ പറഞ്ഞിരിക്കുന്ന വഴികൾ പിന്തുടരുന്നതിലൂടെ, നിങ്ങൾക്ക് ശക്തവും പരിപാലിക്കാൻ എളുപ്പമുള്ളതുമായ വെബ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കാൻ സബ്ഗ്രിഡ് ഫലപ്രദമായി ഉപയോഗിക്കാം.

നെസ്റ്റഡ് സബ്ഗ്രിഡുകൾ വെല്ലുവിളികൾ ഉയർത്താമെങ്കിലും, ചിന്താപൂർവ്വമായ സമീപനവും കൺസ്ട്രെയിൻ്റ് പ്രൊപ്പഗേഷനെക്കുറിച്ചുള്ള നല്ല ധാരണയും സബ്ഗ്രിഡുകൾ ഫലപ്രദമായി ഉപയോഗിക്കാൻ നിങ്ങളെ സഹായിക്കും. നെസ്റ്റിംഗ് ഡെപ്ത് കുറയ്ക്കുക, സിഎസ്എസ് വേരിയബിളുകൾ പ്രയോജനപ്പെടുത്തുക, സമഗ്രമായി ടെസ്റ്റ് ചെയ്യുക എന്നിവ വഴി നിങ്ങളുടെ ലേഔട്ടുകൾ വിവിധ ഉപകരണങ്ങളിലും സ്ക്രീൻ വലുപ്പങ്ങളിലും പരിപാലിക്കാനും റെസ്‌പോൺസീവായി നിലനിർത്താനും സാധിക്കും.